<template>
  <view>
    <view class="search-box">
      <input class="uni-input search-input" placeholder="输入学生姓名" v-model="searchVal" @input="search" />
      <text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
      <button class="mini-btn primary-btn" type="primary" @click="search">查询</button>
      <button class="mini-btn warn-btn" type="warn" @click="reset">重置</button>
    </view>
    <view class="uni-container">
      <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
        <uni-tr>
          <uni-th width="50" align="center">编号</uni-th>
          
          <uni-th width="80" align="center">作业标题</uni-th>
          <uni-th width="80" align="center">姓名</uni-th>
          
          
          <uni-th width="80" align="center">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableDataList" :key="index">
          <uni-td align="center">{{ (pageCurrent - 1) * pageSize + index + 1 }}</uni-td>
         
          <uni-td align="center">{{ item.homeWorkName }}</uni-td>
          <uni-td align="center">{{ item.name }}</uni-td>
         
          <uni-td>
            <view class="uni-group">
              <button @click="toSubmitDetail" class="uni-button" size="mini" type="warn" v-if="item.scored" :id="item.homeWorkId">已批</button>
              <button @click="toSubmitDetail" class="uni-button" size="mini" type="primary" :id="item.homeWorkId" v-else>未批</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
      <view class="uni-pagination-box">
        <uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
// import tableData from './tableData.js';
import apis from '../../api/apis.js';
import { nextTick } from 'vue';

const searchVal = ref('');
const tableDataList = ref([]);
const pageSize = ref(14);
const pageCurrent = ref(1);
const total = ref(0);
const loading = ref(false);
const selectedIndexs = ref([]);
const tableData = ref([])

const selectedItems = () => {
  return selectedIndexs.value.map(i => tableDataList.value[i]);
};

// const getAllStudent = () =>{
// 	apis.selectAllStudent().then(res=>{
// 		console.log(res)
// 	})
// }

const toSubmitDetail = (e)=>{
	console.log(e.currentTarget)
	uni.navigateTo({
		url:'/pages/homeworkCorrect/homeworkCorrect?id='+ e.currentTarget.id
	})
}
const toggleSelection = (index) => {
  if (selectedIndexs.value.includes(index)) {
    selectedIndexs.value = selectedIndexs.value.filter(i => i !== index);
  } else {
    selectedIndexs.value.push(index);
  }
};

const selectionChange = (e) => {
  selectedIndexs.value = e.detail.index;
};

const deleteItem = (index) => {
  tableDataList.value.splice(index, 1);
  total.value--;
  if (pageCurrent.value > 1 && tableDataList.value.length < pageSize.value) {
    pageCurrent.value--;
  }
  getData(pageCurrent.value);
};

const change = (e) => {
  const table = ref(null);
  if (table.value && table.value.clearSelection) {
    table.value.clearSelection();
  }
  selectedIndexs.value.length = 0;
  getData(e.current);
};

const search = () => {
  getData(1, searchVal.value);
};

const reset = () => {
  searchVal.value = '';
  getData(1);
};

const getData = async(currentPage, value = '') => {
  loading.value = true;
  pageCurrent.value = currentPage;
  let res = await apis.selecHomeworkSubmit()
  console.log(res)
  let totalValue = res.data.length;
  
  let data = res.data.filter((item, index) => {
    const idx = index - (currentPage - 1) * pageSize.value;
    return idx < pageSize.value && idx >= 0;
  });
  if (value) {
    data = [];
    res.data.forEach(item => {
      if (item.name.indexOf(value) !== -1) {
        data.push(item);
		console.log(data)
      }
    });
    totalValue = data.length;
  }
  setTimeout(() => {
    tableDataList.value = data;
    total.value = totalValue;
    loading.value = false;
  }, 500);
};

onLoad(() => {
	nextTick(()=>{	
		getData(1);
	})
  
  // getAllStudent();
});

watch(pageCurrent, (newPage) => {
  getData(newPage);
});
</script>

<style lang="scss">
  .search-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 80rpx;
    width: 95%;
    margin: 0 auto;
    background-color: #f5f5f5;
    border: 1px solid #888888;
    border-radius: 8rpx;
    padding: 0 10rpx;
  }

  .search-input {
    flex: 1;
    height: 100%;
    font-size: 44rpx;
    background-color: transparent;
  }

  .uni-icon {
    font-size: 36rpx;
    color: #999;
    cursor: pointer;
  }

  .mini-btn {
    font-size: 25rpx;
    margin-left: 5rpx;
  }

  .primary-btn {
    background-color: #007aff;
    color: #fff;
  }

  .warn-btn {
    background-color: #ff9500;
    color: #fff;
  }

  .uni-group {
    display: flex;
    align-items: center;
  }
</style>